<template>
  <view class="cart-container">
    <!-- 购物车列表 -->
    <block v-if="cartList.length > 0">
      <view 
        class="cart-item" 
        v-for="(item, index) in cartList" 
        :key="index"
      >
        <!-- 商品图片 -->
        <image 
          class="item-img" 
          :src="item.image" 
          mode="aspectFill"
        ></image>
        <!-- 商品信息 -->
        <view class="item-info">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-price">¥{{ item.price }}</text>
        </view>
        <!-- 数量操作 -->
        <view class="item-count">
          <button 
            class="count-btn" 
            @click="decrement(index)"
          >-</button>
          <text class="count-text">{{ item.count }}</text>
          <button 
            class="count-btn" 
            @click="increment(index)"
          >+</button>
        </view>
      </view>
      <!-- 底部操作栏 -->
      <view class="cart-footer">
        <button 
          class="empty-btn" 
          @click="clearCart"
        >清空购物车</button>
        <view class="total-info">
          <text class="total-text">合计：¥{{ totalPrice }}</text>
          <button 
            class="checkout-btn" 
            @click="toPay"
          >立即结算</button>
        </view>
      </view>
    </block>
    <!-- 空购物车状态 -->
    <block v-else>
      <view class="empty-cart">
        <text class="empty-tip">购物车空空如也~</text>
        <text class="empty-desc">快去挑选心仪商品吧</text>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 购物车数据，接收前页传递的商品信息
      cartList: [], 
    };
  },
  onLoad(options) {
    // 接收前一个页面传递的商品信息（假设通过 URL 参数或路由传参，也可通过 Vuex/Pinia 管理）
    // 示例：若前页用 navigateTo 传参：uni.navigateTo({ url: '/pages/cart/cart?cartData=' + JSON.stringify(data) })
    const cartData = JSON.parse(options.cartData || '[]'); 
    this.cartList = cartData;
  },
  computed: {
    // 计算购物车总价格
    totalPrice() { 
      return this.cartList.reduce((sum, item) => sum + item.price * item.count, 0).toFixed(2);
    }
  },
  methods: {
    // 减少商品数量
    decrement(index) { 
      if (this.cartList[index].count > 1) {
        this.cartList[index].count--;
      } else {
        // 数量为1时，可提示是否删除，或直接移除
        this.cartList.splice(index, 1); 
      }
    },
    // 增加商品数量
    increment(index) { 
      this.cartList[index].count++;
    },
    // 清空购物车
    clearCart() { 
      uni.showModal({
        title: '提示',
        content: '确定清空购物车吗？',
        success: (res) => {
          if (res.confirm) {
            this.cartList = [];
          }
        }
      });
    },
    // 跳转支付（可根据实际支付流程调整，如传参到支付页）
    toPay() { 
      // 这里简单示例跳转，实际可传递购物车数据给支付页
      uni.navigateTo({
        url: '/pages/pay/pay?cartData=' + JSON.stringify(this.cartList)
      });
    }
  }
}
</script>

<style scoped>
.cart-container {
  padding: 10px;
  background-color: #fff;
  min-height: 100vh;
}
.cart-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
}
.item-img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-name {
  font-size: 14px;
  color: #333;
}
.item-price {
  font-size: 12px;
  color: #f00;
  margin-top: 5px;
}
.item-count {
  display: flex;
  align-items: center;
}
.count-btn {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
}
.count-text {
  margin: 0 10px;
  font-size: 14px;
}
.cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f8f8;
  margin-top: 10px;
}
.empty-btn {
  font-size: 14px;
  color: #666;
}
.total-info {
  display: flex;
  align-items: center;
}
.total-text {
  font-size: 14px;
  color: #f00;
  margin-right: 10px;
}
.checkout-btn {
  background-color: #07c160;
  color: #fff;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 4px;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 44px);
}
.empty-tip {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}
.empty-desc {
  font-size: 14px;
  color: #999;
}
</style>